import React, { Component } from 'react';
import styles from './index.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import Tablelist from './Tablelist/index';
import Modales from './Modales/index';
import { Form, Input, message, Button, Col, Row, Select, DatePicker, TimePicker } from 'antd';
import { connect } from 'dva';
import moment from 'moment';
import { getShopId } from '@/utils/localStorage';
@Form.create()
@connect(({ buyoutes }) => ({ buyoutes }))
class Buyoutlist extends Component {
    state = {
        isVisible: false,
        isType: null,
        formData: null
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.inForinmation(values);
                this.setState({
                    formData: values
                })
            }
        });
    }
    inForinmation = (values) => {
        const {
            orderbianhao,//订单编号
            goodsName, //商品名称
            orderid,//商品ID
            orderstate, //订单状态
            olOrderid, //原订单编号
            pleaseOrderName,//下单人姓名
            pleaseOrderPhone, //下单人手机号
            goodsPeopleName,//收货人姓名
            goodsPhone, //收货人手机号
            rentTime,//起租时间
            createTime //创建时间
        } = values;
        const { dispatch } = this.props;
        dispatch({
            type: 'buyoutes/getTableList',
            payload: {
                addressUserName: !!goodsPeopleName ? goodsPeopleName : '',
                addressUserPhone: !!goodsPhone ? goodsPhone : '',
                buyOutOrderId: !!orderbianhao ? orderbianhao : '',
                createTimeEnd: !!createTime ? moment(createTime[1]).format('YYYY-MM-DD') : '',
                createTimeStart: !!createTime ? moment(createTime[0]).format('YYYY-MM-DD') : '',
                orderId: !!olOrderid ? olOrderid : '',
                pageNumber: 1,
                pageSize: 10,
                productId: !!orderid ? orderid : '',
                productName: !!goodsName ? goodsName : '',
                rentTimeEnd: !!rentTime ? moment(rentTime[1]).format('YYYY-MM-DD') : '',
                rentTimeStart: !!rentTime ? moment(rentTime[0]).format('YYYY-MM-DD') : '',
                status: !!orderstate ? orderstate : '',
                telephone: !!pleaseOrderPhone ? pleaseOrderPhone : '',
                userName: !!pleaseOrderName ? pleaseOrderName : '',
                shopId: getShopId()
            }
        })
    }
    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'buyoutes/getTableList',
            payload: {
                addressUserName: "",
                addressUserPhone: "",
                buyOutOrderId: "",
                createTimeEnd: "",
                createTimeStart: "",
                orderId: "",
                pageNumber: 1,
                pageSize: 10,
                productId: "",
                productName: "",
                rentTimeEnd: "",
                rentTimeStart: "",
                shopId: getShopId(),
                status: "",
                telephone: "",
                userName: ""
            }
        })
    }
    handleCurrencyChange = (value) => {
        // console.log(value);
    }
    onTimeRent = (date, dateString) => {
        // console.log(dateString);
    }
    onTimeCreate = (date, dateString) => {
        // console.log(dateString);
    }
    onRest = () => {
        this.props.form.resetFields();
        this.setState({
            formData: null
        })
    }
    onCancel = () => {
        this.setState({
            isVisible: false
        })
    }
    onExport = (type) => {
        this.setState({
            isVisible: true,
            isType: type
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const { Option } = Select;
        const { MonthPicker, RangePicker } = DatePicker;
        const { isVisible, isType, formData } = this.state;
        return (
            <PageHeaderWrapper>
                <Form
                    style={{ backgroundColor: '#fff', paddingTop: '20px', borderRadius: '8px' }}
                    layout='inline' onSubmit={this.handleSubmit}>
                    <Row type='flex' justify='space-around' >
                        <Form.Item>
                            {
                                getFieldDecorator('orderbianhao')
                                    (<Input placeholder='请输入订单编号' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('goodsName')
                                    (<Input placeholder='请输入商品名称' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('orderid')
                                    (<Input placeholder='请输入商品ID' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('orderstate')
                                    (
                                        <Select
                                            style={{ width: '250px' }}
                                            onChange={this.handleCurrencyChange}
                                            placeholder='请选择订单状态'
                                        >
                                            <Option value="">全部</Option>
                                            <Option value="WAIT_PAY">待支付</Option>
                                            <Option value="FINISH">订单完成</Option>
                                        </Select>
                                    )
                            }
                        </Form.Item>
                    </Row>
                    <Row type='flex' justify='space-around'>
                        <Form.Item>
                            {
                                getFieldDecorator('olOrderid')
                                    (<Input placeholder='原订单编号' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('pleaseOrderName')
                                    (<Input placeholder='请输入下单人姓名' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('pleaseOrderPhone')
                                    (<Input placeholder='请输入下单人手机号' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('goodsPeopleName')
                                    (<Input placeholder='请输入收货人姓名' className={styles.input_less} />)
                            }
                        </Form.Item>
                    </Row>
                    <Row type='flex' justify='space-around'>
                        <Form.Item>
                            {
                                getFieldDecorator('goodsPhone')
                                    (<Input placeholder='请输入收货人手机号' className={styles.input_less} />)
                            }
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('rentTime')(
                                <RangePicker
                                    style={{ width: 250 }}
                                    onChange={this.onTimeRent}
                                    placeholder={['起租开始时间', '起租结束时间']}
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('createTime')(
                                <RangePicker
                                    style={{ width: 250 }}
                                    onChange={this.onTimeCreate}
                                    placeholder={['创建开始时间', '创建结束时间']}
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            <div className={styles.input_less}></div>
                        </Form.Item>
                    </Row>
                    <Row type='flex' justify='space-between'
                        align='middle' style={{ padding: '20px 40px' }}
                    >
                        <span>
                            <Button htmlType="submit" type='primary'> 提交 </Button>
                            <Button style={{ marginLeft: '10px' }} onClick={this.onRest}> 重置 </Button>
                        </span>
                        <Button onClick={() => this.onExport('export')} type='primary'>导出</Button>
                    </Row>
                </Form>
                <div style={{ padding: '20px 0px' }}>
                    <Tablelist formData={formData} />
                </div>
                <Modales type={isType} visible={isVisible} onCancel={this.onCancel} />
            </PageHeaderWrapper>
        )
    }
}
export default Buyoutlist;